<template>
  <transition name="fade">
    <div v-if='propData.modelValue' class="popover-mask" @click.stop.prevent.self="close">
      <div class="popover">
        <div class="popover-item" v-for="item in propData.popoverAddress" :key="item.id">
          <div class="msg">{{`${item?.contact}(${item?.mobile ?? '--'})`}}</div>
          <div class="msg">{{item?.region + item?.address}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script setup lang="tsx">

import { ref, reactive, computed, watch, withDefaults, markRaw } from 'vue'

const getImageUrl = (name: string): any => {
  return new URL(`../../../../../assets/customer/${name}.png`, import.meta.url).href
}

type Props = {
  modelValue: boolean,
  popoverTop: number,
  popoverLeft: number,
  popoverAddress: any[],
  customerItem: object,
  isHoverUp: boolean
}

const propData = defineProps<Props>()

const emit = defineEmits(['update:modelValue'])

const close = () => {
  emit('update:modelValue', false)
}
let x = ref<string>('0')
let y = ref<string>('0')
let isHoverUp = ref<boolean>(false)

watch(propData, (newVal) => {
  const { popoverAddress: popoverAddress = [], popoverLeft: popoverLeft = 0, popoverTop: popoverTop = 0 } = newVal
  x.value = `${popoverLeft + 16}px`
  const clientHeight = document.body.clientHeight
  const totalHeight = popoverTop + 60 * popoverAddress.length
  isHoverUp.value = totalHeight > clientHeight
  if(isHoverUp.value){
    y.value = `${popoverTop - 2 - popoverAddress.length * 60}px`
  }else{
    y.value = `${popoverTop}px`
  }
},{deep: true})

</script>
<style scoped lang="scss">
.fade-enter-from, .fade-leave-to{
  opacity: 0;
}
.fade-enter-to, .fade-leave-from{
  opacity: 1;
}
.fade-enter-active, .fade-leave-active{
  transition: all .6s;
}


.popover-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;

  .popover {
    position: fixed;
    z-index: 9999;
    top: v-bind(y);
    left: v-bind(x);
    background-color: #fff;
    box-shadow: 0 0 40px #ddd;

    .popover-item {
      margin: 0 10px;
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;

      &:last-of-type {
        border-bottom: none;
      }
      .msg{
        font-size: 12px;
      }
    }
  }
}
</style>
